<template>
  <div class="login-form">
    <t-form
      ref="form"
      :class="['login-form-container']"
      :data="formData"
      :rules="rules"
      label-width="0"
      @submit="onSubmit"
    >
      <t-form-item name="username">
        <t-input
          v-model="formData.username"
          size="large"
          placeholder="请输入用户名"
        >
          <template #prefix-icon>
            <t-icon name="user" />
          </template>
        </t-input>
      </t-form-item>

      <t-form-item name="password">
        <t-input
          v-model="formData.password"
          size="large"
          :type="showPsw ? 'text' : 'password'"
          clearable
          placeholder="请输入登录密码"
        >
          <template #prefix-icon>
            <t-icon name="lock-on" />
          </template>
          <template #suffix-icon>
            <t-icon
              :name="showPsw ? 'browse' : 'browse-off'"
              @click="showPsw = !showPsw"
            />
          </template>
        </t-input>
      </t-form-item>

      <div class="check-container">
        <span class="tip" @click="toForgetPassword">忘记密码？</span>
      </div>

      <t-form-item>
        <t-button
          block
          size="large"
          type="submit"
          :loading="loading"
        >
          登录
        </t-button>
      </t-form-item>
    </t-form>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { MessagePlugin } from 'tdesign-vue';
import { mapActions } from 'vuex';

const INITIAL_DATA = {
  username: '',
  password: '',
};

const FORM_RULES = {
  username: [
    { required: true, message: '请输入用户名', type: 'error' },
    { min: 2, message: '用户名需要至少2个字符', type: 'error' },
  ],
  password: [
    { required: true, message: '请输入密码', type: 'error' },
    { min: 6, message: '密码需要至少6个字符', type: 'error' },
  ],
};

/** 高级详情 */
export default Vue.extend({
  name: 'LoginForm',
  data() {
    return {
      showPsw: false,
      loading: false,
      formData: { ...INITIAL_DATA },
      rules: FORM_RULES,
    };
  },
  methods: {
    ...mapActions('user', ['login']),
    
    async onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        try {
          this.loading = true;
          
          // 登录
          await this.login(this.formData);
          
          // 获取用户信息
          // await this.getUserInfo();
          
          MessagePlugin.success('登录成功');
          
          // 跳转到首页或者上一个页面
          const redirect = this.$route.query.redirect || '/';
          this.$router.push(redirect);
        } catch (error) {
          console.error('登录失败:', error);
          MessagePlugin.error(error.message || '登录失败');
        } finally {
          this.loading = false;
        }
      } else {
        MessagePlugin.error(firstError);
      }
    },
    
    toForgetPassword() {
      MessagePlugin.info('请联系管理员重置密码');
    },
  },
});
</script>

<style lang="less" scoped>
.login-form {
  padding: 40px;
  
  .check-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 24px;
    
    .tip {
      color: var(--td-brand-color);
      cursor: pointer;
      
      &:hover {
        color: var(--td-brand-color-hover);
      }
    }
  }
}
</style>
